<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--<script src="perspective.js"></script>-->
		<script src="html5rush.binding.js"></script>
		<!--<script src="jquery-1.6.4.min.js"></script>-->
		<title>Путешествие, Весёлые картинки</title>
		<style>
			body {margin: 0px; padding: 0px; background-color:#67AA39;}
		</style>
		<script type="text/javascript">
			var mapWidth=0;
			var mapHeight=0;
			var pov;
			var image;
			var imageCanvas;
			var imageContext;
			var ys=-800;
			function readSize() {
				var mWidth = 0;
				var myHeight = 0;
				if(typeof(window.innerWidth)=='number'){//Non-IE
					mWidth=window.innerWidth;
					mHeight=window.innerHeight;
					} 
				else {
					if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){//IE 6+ in 'standards compliant mode'
						mWidth=document.documentElement.clientWidth;
						myHeight=document.documentElement.clientHeight;
						} 
					else {
						if(document.body && (document.body.clientWidth || document.body.clientHeight )){//IE 4 compatible
							mWidth=document.body.clientWidth;
							mHeight=document.body.clientHeight;
							}
						}
					}
				mapWidth=mWidth;
				mapHeight=mHeight;
				var c=document.getElementById("canvas");
				c.width=mapWidth;
				c.height=mapHeight;
				}
			function initAll(){
				//alert("test");
				var c=new Canvas();
				var m=new Picture();
				//var d=localStorage.getItem("d");
				var x=parseInt(localStorage.getItem("x"));
				var y=parseInt(localStorage.getItem("y"));
				//alert(x);
				if(x+1!=1+x)x=0;
				if(y+1!=1+y)y=0;
				
				/*localStorage.setItem("d","D");
				d=localStorage.getItem("d");
				alert(d);*/
				c.shiftX.value(x);
				c.shiftY.value(y);
				var map=new Layer();
				pov=new POV();pov.camera=new XYZ(0,0,200);pov.viewer=new XYZ(0,0,1000);
				image=document.getElementById("gamemap");
				//var t=pov.xy(new XYZ(-image.width/2+c.shiftX.value(),ys,0-image.height+c.shiftY.value()));
				//alert(t.x+"/"+t.y+":"+(-image.width/2+c.shiftX.value())+"/"+(0-image.height+c.shiftY.value()));
				imageCanvas=document.createElement('canvas');
				imageCanvas.width=image.width;
				imageCanvas.height=image.height;
				imageContext=imageCanvas.getContext('2d');
				imageContext.drawImage(image,0,0);
				map.render=function(context){					
					var xy1;
					var xy2;
					var xy3;
					var xy4;					
					var hh;					
					for(var nn=0;nn<image.height-1;nn++){
						xy1=pov.xy(new XYZ(-image.width/2+c.shiftX.value(),ys,nn-image.height+c.shiftY.value()));
						xy2=pov.xy(new XYZ(+image.width/2+c.shiftX.value(),ys,nn-image.height+c.shiftY.value()));
						xy3=pov.xy(new XYZ(+image.width/2+c.shiftX.value(),ys,nn-image.height+2+c.shiftY.value()));
						xy4=pov.xy(new XYZ(-image.width/2+c.shiftX.value(),ys,nn-image.height+2+c.shiftY.value()));
						hh=xy4.y-xy1.y;
						if(hh<1)hh=1;
						context.drawImage(imageCanvas
								,0,nn,image.width,2
								,xy1.x+mapWidth/2,xy1.y-400,xy2.x-xy1.x,hh
								);	
						}
					};
				new Amount().bind(c.shiftX).afterChange=function(){
					if(c.shiftX.value()>1500){
						c.shiftX.value(1500);
						}
					else {
						if(c.shiftX.value()<-1500){
							c.shiftX.value(-1500);
							}
						else{
							localStorage.setItem("x",c.shiftX.value());
							}
						}
					//alert("x: "+c.clickX.value());
					//alert(map.children.length);
					};
				new Amount().bind(c.shiftY).afterChange=function(){
					if(c.shiftY.value()>1000){
						c.shiftY.value(1000);
						}
					else {
						if(c.shiftY.value()<-1000){
							c.shiftY.value(-1000);
							}
						else{
							localStorage.setItem("y",c.shiftY.value());
							}
						}
					//localStorage.setItem("y",c.shiftY.value());
					//alert("y: "+c.clickY.value());
					};
				//alert("test");
				
				c.attach('canvas').delay(50)
					//.child(m
						//.x(c.shiftX)
						//.y(c.shiftY)
						//.width(32)
						//.height(32)
						//.image("runner.png")
						//.attach("gamemap")
						//)
					.child(map)
					.child(new Picture()
						.x(50)
						.y(200)
						//.width(32)
						//.height(32)
						//.image("runner.png")
						.attach("runner")
						)
					/*.child(new LinearGradientRectangle()
						.width(150)
						.height(100)
						.x(c.overX)
						.y(c.overY)
						.distanceX(0.5)
						.distanceY(0)
						.point(new ColorPoint().distance(0).color("#ff0000"))
						.point(new ColorPoint().distance(1).color("#00ff00"))
						)*/
					.child(new Glyph()
						.x(10)
						.y(0)
						.fill("#ff0000")
						.text(new Text().value("over ").append(c.overX.asText()).append("x").append(c.overY.asText()))
						.font("Bold 10px Sans-Serif")
						)
					.child(new Glyph()
						.x(10)
						.y(12)
						.fill("#ff0000")
						.text(new Text().value("down ").append(c.downX.asText()).append("x").append(c.downY.asText()))
						.font("Bold 10px Sans-Serif")
						)
					.child(new Glyph()
						.x(10)
						.y(12*2)
						.fill("#ff0000")
						.text(new Text().value("click ").append(c.clickX.asText()).append("x").append(c.clickY.asText()))
						.font("Bold 10px Sans-Serif")
						)
					.child(new Glyph()
						.x(10)
						.y(12*3)
						.fill("#ff0000")
						.text(new Text().value("shift ").append(c.shiftX.asText()).append("x").append(c.shiftY.asText()))
						.font("Bold 10px Sans-Serif")
						)
					.child(new Glyph()
						.x(10)
						.y(12*4)
						.fill("#ff0000")
						.text(new Text().bind(new Fork()
							.condition(c.mousePressed)
							.then("down")
							.otherwise("up")
							))
						//new Text().value("picture ").append(m.x().asText()).append("x").append(m.y().asText()))
						.font("Bold 10px Sans-Serif")
						)
					;
				readSize();
				c.startRenderLoop();
				
				//c.render();
				//alert(new Text().value("picture ").append(m.x().asText()).append("x"));
				//alert("===");
				
				}
			/*function drawPersp(){
				var canvas1 = document.createElement('canvas1');
				canvas1.width = canvas1.width;
				canvas1.height = canvas1.height;
				var ctx1 = canvas1.getContext('2d');
				ctx1.fillStyle = '#666666';
				ctx1.fillRect(250,150,100,150);
				var op = null;
				var points = [[50, 50], [550, 100], [300, 400], [100, 400]];
				var img = new Image();
				img.src = 'runner.png';
				op = new html5jp.perspective(ctx1, img);
				op.draw(points);
				alert("dsfb");
				}*/
			/*document.ready=function(){
				initAll();								
				};*/
			//drawPersp();	
			//alert("go");
			
		</script>
	</head>
	<body onLoad="initAll()">
		<canvas id="canvas" width="800" height="400" >0</canvas>	
		<!--<canvas id="canvas1" width="800" height="400" >0</canvas>	-->
		<img id="gamemap" src="vk.jpg" style="display:none" />
		<img id="runner" src="runner.png" style="display:none" />
	<script>
		//initAll();
	</script>	
	</body>
</html>
